<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品')" />
    <title> 商品规格 </title>
    <link th:href="@{/ruoyi/css/sku.css}" rel="stylesheet"/>
</head>
<body class="white-bg">
    <div class="ws-goodstyle">
        <p class="ws-goodstyle__tit">
            <span>商品规格</span>点击选择当前商品需要的规格。
        </p>
        <div class="ws-goodstyle__sec">
            <ul class="ws-goodstyle__tab" data-role="style-tab">
                <li class="is-active" data-value='' data-id='' data-spec-id=2><i>颜色</i>(<span>0</span>)</li>
                <li data-value='' data-id='' data-spec-id=9><i>尺码</i>(<span>0</span>)</li>
            </ul>
            <ul class="ws-goodstyle__result" data-role="style-result">
                <li class="is-active">
                    <div class="ws-goodstyle__selectAll">
                        <label for="selectAll1">
                            <input type="checkbox" data-role="selectall" id="selectAll1"> 全选
                        </label>
                    </div>
                    <ul class="ws-goodstyle__item" data-role="goodstyleitem0">
                        <li>
                            <input type="checkbox" id="s1" title="黑色" value="黑色" data-id=1>
                            <label for="s1">
                                <span class="spec-name">黑色</span>
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" id="s2" title="黄色" value="黄色" data-id=2>
                            <label for="s2">
                                <span class="spec-name">黄色</span>
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" id="s3" title="红色" value="红色" data-id=3>
                            <label for="s3">
                                <span class="spec-name">红色</span>
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" id="s4" title="绿色" value="绿色" data-id=4>
                            <label for="s4">
                                <span class="spec-name">绿色</span>
                            </label>
                        </li>

                    </ul>
                    <div class="spec-img">
                        <table class="gridlist" data-role="gridstyle">
                            <thead>
                                <tr>
                                    <th>规格</th>
                                    <th>关联商品图片</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                          </table>
                    </div>
                </li>
                <li>
                    <div class="ws-goodstyle__selectAll">
                        <label for="selectAll2">
                            <input type="checkbox" data-role="selectall" id="selectAll2"> 全选
                        </label>
                    </div>
                    <ul class="ws-goodstyle__item" data-role="goodstyleitem1">
                        <li>
                            <input type="checkbox" id="d1" title="12" value="12" data-id=6>
                            <label for="d1">
                                <span class="spec-name">12</span>
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" id="d2" title="13" value="13" data-id=7>
                            <label for="d2">
                                <span class="spec-name">13</span>
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" id="d3" title="14" value="14" data-id=8>
                            <label for="d3">
                                <span class="spec-name">14</span>
                            </label>
                        </li>

                    </ul>
                    <div class="spec-img">
                        <table class="gridlist" data-role="gridstyle">
                            <thead>
                                <tr>
                                    <th>规格</th>
                                    <th>关联商品图片</th>
                                </tr>
                            </thead>
                            <tbody>
                                </tbody>
                          </table>
                    </div>
                </li>
            </ul>
        </div>
        <div class="btn btn-w-m btn-success btn-sm ws-goodstyle__pro" data-role="generate">
            生成所有商品
        </div>
        <div class="ws-goodstyle__tableTit">
            共<span>0</span>件商品
        </div>
        <div class="spec-tree">
            <table cellspacing="0" cellpadding="0" border="0" class="gridlist">
                <thead>
                  <tr>
                    <th style="width:auto;">规格值</th>
                    <th style="width:auto;">货号</th>
                    <th style="width:4%;">上架</th>
                    <th style="width:6%;">库存</th>
                    <th style="width:6%;">冻结库存</th>
                    <th style="width:15%;">销售价</th>
                    <th style="width:8%;">成本价</th>
                    <th style="width:8%;">市场价</th>
                    <th style="width:8%;">重量(g)</th>
                    <th style="width:8%;">货位</th>
                    <th style="width:5%;">默认货品</th>
                    <th style="width:4%;">操作</th>
                  </tr>
                </thead>
                <tbody data-role="styleResult">

                </tbody>
            </table>
            <div class="ws-goodstyle__save">
                <span class="btn btn-w-m btn-success btn-sm" data-role="styleSave">
                    保存
                </span>
            </div>
        </div>

    </div>
</body>
<div th:include="include::footer"></div>
<script th:src="@{/ruoyi/js/sku.js}"></script>
<script th:inline="javascript">



$(function () {
    typeId = [[${typeId}]];

    productBn = [[${bn}]];
    goodsStore = [[${store}]];
    price = [[${price}]];
    storePlace = [[${storePlace}]];


    //根据typeId展示对应的规格和规格值
    var specList =  JSON.parse([[${specificationList}]]);
    $('[data-role="style-tab"]').html('');
    $('[data-role="style-result"]').html("");
    for (var i = 0; i < specList.length; i++) {
        var specification = specList[i];
        var li = "<li ";
        if (i == 0) {
            li += "class='is-active'";
        }
        li += " data-value='' data-id='' data-spec-id='" + specification.specId + "'><i>" + specification.specName + "</i>(<span>0</span>)</li>";
        $('[data-role="style-tab"]').append(li);

        //右边的规格值
        buildRightSpecValue(i,specification.specValuesList);

        var specDesc = [[${specDesc}]];
        if(specDesc != "" && specDesc != null){
            var specDescJson = JSON.parse(specDesc);
            buildProducts(specDescJson.productsList);
        }
    }
});

// 保存
$(document).on('click', '[data-role="styleSave"]', function() {
    var len = $('[data-role="styleResult"] tr').find('[data-role="moren"]:checked').length;

    if(len == 0) {
        alert('请选择默认商品');
        return;
    }
    else {
        var value = $('[data-role="styleResult"] tr').find('[data-role="moren"]:checked').
        closest('tr').find('input[name="marketable"]').prop('checked');
        if(!value){
            alert('默认商品货品不可以下架');
            return;
        }

        var productsIndexJson = [];

        $.each($('[data-role="styleResult"] tr'), function(index, item) {
            var productsJsonItem = {
                specInfo: "",
                specJson: []
            }
            var str = $(item).find('td').eq(0).find('span').html().trim();
            productsJsonItem.specInfo = str;
            var strArr = str.split(',');
            $.each(strArr, function(indexDir, itemDir) {

                var itemStr = itemDir.split(':')[1];

                $.each($('[data-role="goodstyleitem'+indexDir+'"]').find('li'), function(indexDir2, itemDir2) {

                    var itemDom = $(itemDir2).find('input');
                    var itemDomIndex = itemDom.closest('li').index();

                    if(itemDom.val() == itemStr) {
                        var obj = {};
                        var index1 = itemDom.closest('.ws-goodstyle__result>li').index();
                        obj.specId = $('[data-role="style-tab"] li').eq(index1).attr('data-spec-id');
                        obj.specValueId = itemDom.attr('data-id');
                        obj.imageId = itemDom.attr('data-imageid') || "";
                        obj.imageUrl = itemDom.attr('data-imageurl') || "";
                        productsJsonItem.specJson.push(obj);
                    }
                })
            })

            productsIndexJson.push(productsJsonItem);
        })

        var productsJson = [];

        var apecTr = $('[data-role="styleResult"] tr');
        // console.log(apecTr)
        for (var i = 0, len = apecTr.length; i < len; i++) {
            var obj = {};
            obj.specInfo = apecTr.eq(i).find('input').eq(0).val().trim();
            obj.bn = apecTr.eq(i).find('input').eq(1).val().trim();
            obj.marketable = apecTr.eq(i).find('input').eq(2).prop('checked');
            obj.store = apecTr.eq(i).find('input').eq(3).val().trim();
            obj.price = apecTr.eq(i).find('input').eq(4).val().trim();
            obj.cost = apecTr.eq(i).find('input').eq(5).val().trim();
            obj.mktprice = apecTr.eq(i).find('input').eq(6).val().trim();
            obj.weight = apecTr.eq(i).find('input').eq(7).val().trim();
            obj.storePlace = apecTr.eq(i).find('input').eq(8).val().trim();
            obj.isDefault = apecTr.eq(i).find('input').eq(9).prop('checked');
            obj.productId = apecTr.eq(i).find('input').eq(10).val();
            productsJson.push(obj);
        }


        var specDescLi = $('[data-role="style-tab"] li');
        var specName = "";
        for (var i = 0, len = specDescLi.length; i < len; i++) {
            specName += specDescLi.find("i").eq(i).html() + "(" + specDescLi.find("span").eq(i).html() + ")";
            if (i < len - 1) {
                specName += ",";
            }
        }

        goodsId = [[${goodsId}]];
        //关闭规格
        if(goodsId == -1){
            $.modal.confirm("保存成功,是否关闭窗口?", function () {
                // var specDesc = {"specNames": specName,"productsList":JSON.stringify(productsJson),"productsIndexList":JSON.stringify(productsIndexJson),"num":productsJson.length};
                var specDesc = {"specNames": specName,"productsList":productsJson,"productsIndexList":productsIndexJson,"num":productsJson.length};
                var specDescStr = JSON.stringify(specDesc);
                //
                // var specDescStr1 = JSON.stringify(specDesc1);

                // console.log("specDescStr",specDescStr)
                // console.log("specDescStr1",specDescStr1)
                parent.setSpecDesc(specDescStr);
                $.modal.close();

            });
        }
    }
});



</script>

</html>
